<template>
  <router-link :to="{name:'personalDetail',query:{id:data.id}}" class="personal-item">
      <div class="information-item">
        <div class="personal-img">
          <img :src="data.user.faceUrl" class="personal-img" @error="imgError">
        </div>
        <div class="name-item">
          <div class="personal-name">{{data.realName}}</div>
          <div class="personal-wage">{{ data.salaryMin }}-{{ data.salaryMax}}元</div>
        </div>
        <div class="personal-information">
          <div class="sexText">{{data.birthday}}岁&nbsp;&nbsp;<span style=" color: darkGray" >/</span>&nbsp;</div>
          <div class="sexText" v-if="data.education">{{data.education}}&nbsp;&nbsp;<span  style=" color: darkGray">/</span>&nbsp;</div>
          <div class="sexText" v-else>{{data.educationText}}&nbsp;&nbsp;<span  style=" color: darkGray">/</span>&nbsp;</div>
          <div class="sexText" v-if="data.workTimeStart==='0年'">
            工作经验小于一年
          </div>
          <div class="sexText" v-else>{{data.workTimeStart}}工作经验</div>
        </div>
      </div>
    <div class="personal-label-block">
      <div v-for="(item1,index) in data.label" class="personal-label-item">{{item1}}</div>
    </div>
      <div class="address-item">
        <div class="address-title">想找：</div>
        <div class="personal-address">{{data.regArea}}&nbsp;&nbsp;<span>/</span>&nbsp;&nbsp;{{data.postName}}</div>
      </div>
    </router-link>
</template>

<script>
export default {
  name: "PositionItemRow",
  props: {
    data: Object
  },
  methods:{
    imgError(){
      this.data.customer.user.faceUrl = process.env.VUE_APP_FACE_URL;
    },
  }
}
</script>

<style lang="scss" scoped>
.personal-item {
  padding: 20px;
  margin-bottom: 15px;
  width: 390px;
  background-color: #fff;
  .information-item{
    border-bottom: 1px solid $lightGray;
    .personal-img{
      width: 50px;
      height: 50px;
      position: absolute;
      margin-bottom: 15px;
      border-radius: 50%;
    }
    .name-item{
      display: flex;
      flex-direction: row;
      margin-left: 70px;
      margin-bottom: 15px;
      .personal-name{
        font-weight: bold;
        font-size: 18px;
      }
      .personal-wage{
        font-weight: bold;
        font-size: 18px;
        color: $orange;
        margin-left: 20px;
      }
    }
    .personal-information{
      margin-left: 70px;
      font-size: 13px;
      color: $darkGray;
      margin-top: 10px;
      margin-bottom: 15px;
      display: flex;
      flex-direction: row;
      .sexText{
        color: $darkGray;
        //border-right: 1px solid $darkGray;
        padding-right: 3px;
        margin-right: 3px;
      }
      .education{
        color: $darkGray;
        //border-right: 1px solid $darkGray;
        padding-right: 3px;
        margin-right: 3px;
      }
      .workTimeStart{
        color: $darkGray;
      }
    }
  }
  .personal-label-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 15px;
    .personal-label-item {
      margin-right: 10px;
      margin-bottom: 10px;
      color: $darkGray;
      background: $lightGray;
      padding: 4px 8px;
      font-size: 13px;
    }
  }
  .address-item{
    display: flex;
    flex-direction: row;
    font-size: 13px;
    .address-title{
      color: $darkGray;
      width: 40px;
    }
    .personal-address{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.personal-item:hover {
  box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* 盒子悬浮时阴影 */
}

</style>
